<template>
    <!-- 活动产品是否存在 -->
    <view
        v-if="newCustomGoods.length"
        :style="'margin-top:' + itemData.style.paddingTop + 'px;'"
    >
        <view class="newCustomIndex">
            <view class="topBlank">
                <view class="flex">
                    <view class="xinrenzhuanxiang">
                        <image
                            style="height: 40rpx"
                            class=""
                            :src="
                                itemData.style.topimage
                                    ? itemData.style.topimage
                                    : $setting.imageUrl() + 'firstOrder.png'
                            "
                            mode="heightFix"
                        ></image>
                    </view>
                </view>
                <view class="jinruhuodong" @click="gotoPages(itemData.params)">
                    {{
                        itemData.params.moretext
                            ? itemData.params.moretext
                            : '进入活动 >'
                    }}
                </view>
            </view>
            <view
                class="woDeXinRenYouHui"
                v-if="couponLists && couponLists.length !== 0 && !isClick"
            >
                <!-- <view class="woDeXinRenYouHui"> -->
                <!-- <view class="atLeft">
					<view class="title">我的新人优惠券</view>
					<view class="more flex u-row-center" @click="zhuanQv">更多福利</view>
				</view> -->
                <view class="atRignt">
                    <scroll-view class="scrollView" :scroll-x="true">
                        <view class="flex muchCutPrice" v-if="!isClick">
                            <view
                                class="byOneIndexCustom"
                                v-for="(item, index) in couponLists"
                                @click="postReceiveList(item.coupon_id, index)"
                            >
                                <view
                                    class="insideOne"
                                    :style="{
                                        backgroundImage:
                                            'url(' +
                                            $setting.imgUrl() +
                                            '/static/indexYouHuiQuan.png' +
                                            ')',
                                    }"
                                >
                                    <view class="topText"
                                        >￥
                                        <span
                                            style="
                                                font-size: 44rpx;
                                                font-weight: bold;
                                            "
                                            >{{ dealWithPrice(item.reduce_price) }}</span
                                        >
                                    </view>
                                    <view class="bottomText"
                                        >{{ dealWithText(item.min_price) }}</view
                                    >
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="goodsList">
                <scroll-view class="scrollView" :scroll-x="true">
                    <view class="flex muchCutPrice">
                        <view
                            class="byOneIndexCustom"
                            v-for="(item, index) in newCustomGoods"
                            :key="index"
                        >
                            <view
                                class="insideOne"
                                @click.stop="
                                    jump(
                                        '/pages/categoty/product/product_no_cart?id=' +
                                            item.product_id
                                    )
                                "
                            >
                                <image
                                    class="goodsImg"
                                    :src="item.product_image"
                                    mode=""
                                ></image>
                                <view class="title">
                                    {{ item.product_name }}
                                </view>
                                <view class="flex-space-between">
                                    <view class="product-con-price">
                                        <view class="topprice">
                                            <view class="sellMoney"
                                                ><text>￥</text
                                                >{{
                                                    item.product_sku.product_price.split(
                                                        '.'
                                                    )[0] + '.'
                                                }}</view
                                            >
                                            <view class="sellMoney_small">{{
                                                item.product_sku.product_price.split(
                                                    '.'
                                                )[1]
                                            }}</view>
                                        </view>
                                        <text class="deleteMoney"
                                            >￥{{
                                                item.product_sku.line_price
                                            }}</text
                                        >
                                    </view>
                                    <b-u-button-theme
                                        width="52rpx"
                                        height="40rpx"
                                        size="24rpx"
                                        @click.stop="
                                            jump(
                                                '/pages/categoty/product/product_no_cart?id=' +
                                                    item.product_id
                                            )
                                        "
                                        >购买</b-u-button-theme
                                    >
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'NewCustomInIndex',
    data() {
        return {
            isClick: false,
        };
    },
    props: {
        newCustomGoods: {
            type: Array,
            default: [],
        },
        couponLists: {
            type: Array,
            default: [],
        },
        userInfo: {
            type: Object,
            default: {},
        },
        itemData: {
            type: Object,
            default: {},
        },
    },
    onLoad() {},
    mounted() {
        console.log(this.couponLists, '?????????????????????????????');
    },
    methods: {
		dealWithText(min_price) {
            if (min_price !== '0.00') {
                const arr = min_price.split('.');
                const text = arr[1] === '00' ? arr[0] : min_price;
                return `满${text}可用`;
            } else {
                return '无门槛';
            }
        },
		dealWithPrice(price) {
            const arr = price.split('.');
            const curPriceText = arr[1] === '00' ? arr[0] : price;
            return curPriceText;
        },
        postReceiveList() {
            if (uni.$u.test.isEmpty(this.userInfo.userInfo.mobile)) {
                this.jump('/pages/login/login');
                return;
            }
            let coupon_ids = [];
            this.couponLists.forEach((item, key) => {
                coupon_ids.push(item.coupon_id);
            });
            uni.$u.api
                .postReceiveList({
                    coupon_ids,
                })
                .then((res) => {
                    this.$emit('hideCouponModal', false);
                    uni.showToast({
                        title: '领取成功',
                    });
                    this.isClick = true;
                });
        },
        ling(coupon_id, index) {
            console.log('coupon_id', coupon_id);
            // let coupon_id = coupon_id;
            uni.$u.api
                .postReceiveOne({
                    coupon_id,
                })
                .then((res) => {
                    this.$emit('hideCouponModal', false);
                    uni.showToast({
                        title: '领取成功',
                    });
                });
        },
        zhuanQv() {
            uni.navigateTo({
                url: '/pages_sub/new_custom_free/new_custom_free',
            });
        },
        jump(url) {
            uni.navigateTo({
                url: url,
            });
        },
        /*跳转页面*/
        gotoPages(e) {
            let dog = e.linkUrl ? e.linkUrl : e.name;
            dog = dog + '';
            console.log(dog);
            uni.navigateTo({
                url: dog,
            });
        },
    },
};
</script>
<style scoped lang="scss">
.product-con-price {
    display: flex;
    margin-top: 20rpx;
    flex-direction: column;
    .topprice {
        display: flex;
        flex-direction: row;
    }
}
</style>
<style lang="scss">
.newCustomIndex {
    // margin-top: 20rpx;
    width: 100%;
    // height: 650rpx;
    border-radius: 24rpx;
    opacity: 1;

    background: linear-gradient(0deg, #bb0024 0%, #e80d0d 100%);
    padding: 26rpx 0 20rpx 0;

    .fine {
        color: #fff;
        padding-top: 50rpx;
        padding-right: 130rpx;
    }

    .topBlank {
        display: flex;
        justify-content: space-between;
        padding-left: 25rpx;
    }

    .xinrenzhuanxiang {
        font-size: 26px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0em;
        font-style: italic;
        color: #ffffff;
        padding: 10rpx 10rpx;
    }

    .subtitle {
        font-size: 12px;
        font-weight: normal;
        line-height: 26px;
        letter-spacing: 0em;
        color: #ffffff;
        margin-left: 9px;
        padding-top: 0px;
    }

    .jinruhuodong {
        width: 140rpx;
        height: 20px;
        border-radius: 4px 0px 0px 4px;
        opacity: 1;

        background: #fff6be;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        color: #e80d0d;
        padding-left: 9px;
    }

    .woDeXinRenYouHui {
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #fff6be;
        height: 78px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        margin-left: 15rpx;
        margin-right: 15rpx;
        .atLeft {
            width: 230rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                font-size: 14px;
                font-weight: normal;
                line-height: 20px;
                letter-spacing: 0em;
                color: #ffffff;
                margin-top: 28rpx;
            }

            .more {
                margin-top: 10rpx;
                width: 70px;
                height: 22px;
                border-radius: 80px;
                opacity: 1;

                background: #fff6be;
                font-size: 12px;
                font-weight: normal;
                line-height: 20px;
                color: #e80d0d;
            }
        }

        .atRignt {
            width: 400rpx;
            height: 100%;
            border-left: 1px solid #fff6be;
            // border-radius: 40rpx 0rpx 0rpx 40rpx;
            flex: 1;
            /* 让右侧容器占据剩余空间 */
            overflow-x: auto;
            /* 允许内容溢出时出现横向滚动条 */
            white-space: nowrap;

            /* 防止子元素换行 */
            .scrollView {
                display: flex;
                // padding: 17rpx 0rpx 15rpx 0rpx;
                height: 100%;

                .muchCutPrice {
                    height: 100%;
                    align-items: center;
                }

                // align-items: center;
                .byOneIndexCustom {
                    width: 230rpx;
                    height: 120rpx;
                    margin-left: 20rpx;

                    .youHuiQuan {
                        width: 222rpx;
                        height: 119rpx;
                        z-index: 1;
                    }

                    .insideOne {
                        height: 120rpx;
                        z-index: 10;
                        padding-top: 12px;
                        padding-left: 12px;
                        // position: fixed;
                        width: 222rpx;
                        background-size: 100% 100%;
                        // background-image: url('https://devadmin.jiumaioda.com/static/indexYouHuiQuan.png');

                        .topText {
                            font-size: 14px;
                            font-weight: normal;
                            line-height: 20px;
                            color: #e80d0d;
                        }

                        .bottomText {
                            font-size: 10px;
                            font-weight: normal;
                            line-height: 20px;
                            color: #e80d0d;
                        }
                    }
                }
            }
        }
    }

    .goodsList {
        width: 100%;
        // height: 340rpx;
        flex: 1;
        /* 让右侧容器占据剩余空间 */
        overflow-x: auto;
        /* 允许内容溢出时出现横向滚动条 */
        white-space: nowrap;
        margin-top: 18rpx;
        padding-left: 15rpx;
        padding-right: 15rpx;
        .scrollView {
            display: flex;
            // padding: 17rpx 0rpx 15rpx 0rpx;

            // align-items: center;
            .byOneIndexCustom {
                margin-right: 17rpx;
                width: 122px;
                height: 179px;
                border-radius: 6px;
                opacity: 1;
                background: #ffffff;

                .youHuiQuan {
                    width: 222rpx;
                    height: 119rpx;
                    z-index: 1;
                }

                .insideOne {
                    padding: 10rpx;
                    height: 120rpx;
                    z-index: 10;
                    // position: fixed;
                    width: 222rpx;

                    .goodsImg {
                        width: 100%;
                        height: 100px;
                    }

                    .title {
                        font-size: 12px;
                        font-weight: normal;
                        line-height: 20px;
                        color: #111111;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .sellMoney {
                        padding-top: 5rpx;
                        font-size: 27rpx;
                        font-weight: bold;
                        color: #bb0024;
                        line-height: 22rpx;
                    }
                    .sellMoney_small {
                        padding-top: 8rpx;
                        font-size: 20rpx;
                        font-weight: bold;
                        color: #bb0024;
                        line-height: 22rpx;
                    }
                    .deleteMoney {
                        font-size: 12px;
                        font-weight: normal;
                        text-decoration: line-through;
                        color: #999999;
                    }
                }
            }
        }
    }
}
</style>
